<script setup>
import { useRouter} from "vue-router"
import { getMonthCartListAPI,getMonthCartshareAPI,delMonthCartAPI } from "../../api/monthCart"
import { onMounted, ref } from 'vue'
const router = useRouter()
const monthCardData = ref([])
const data = ref({
  page:1,
  pageSize:5,
  carNumber:'',
  personName:'',
  cardStatus:''
})
const total = ref(0)
const handleSizeChange =(e)=>{
    data.value.pageSize = e
    getMonthCartList()
  }
  const handleCurrentChange =(e)=>{
    data.value.page = e
    getMonthCartList()
  }
  const getMonthCartList = async()=>{
    const res= await getMonthCartListAPI(data.value)
    monthCardData.value = res.data.rows
    total.value = res.data.total
  }
  const status = ref([{id:'0',name:'可用'},{id:'1',name:'已过期'},{id:'',name:'全部'}])
  const options = status.value.map(i=>{
    return {
      label:i.name,
      value:i.id
    }
  })
  onMounted(()=>{
    getMonthCartList()
    getMonthCartshare()
  })
  const share = ref({})
  const getMonthCartshare = async()=>{
    const res = await getMonthCartshareAPI()
    share.value = res.data
  }
  const query = ()=>{
    getMonthCartList()
  }
  const del = async(id)=>{
    await delMonthCartAPI(id)
    getMonthCartList()
    getMonthCartshare()
  }
  const ids = ref(null)
  const hSelect =(e)=>{
    ids.value = e.map(i=>{
      return i.id
    })
  }
  const batchDel = async()=>{
    await delMonthCartAPI(ids.value)
    getMonthCartList()
    getMonthCartshare()
  }
  const addMonthCart = ()=>{
    router.push('/monthCard/addMonthCard')
  }
  const renew = (id)=>{
    router.push(`/monthCard/renewMonthCard/${id}`)
  }
  const view = (id)=>{
    router.push(`/monthCard/viewMonthCard/${id}`)
  }
  const edit = (id)=>{
    router.push(`/monthCard/editMonthCard/${id}`)
  }
</script>

<template>
  <div class="monthCart">
    <el-form class="form" inline>
      <el-form-item label="车牌号码">
        <el-input v-model="data.carNumber" placeholder="请输入车牌号"/>
      </el-form-item>
      <el-form-item label="车主姓名">
        <el-input v-model="data.personName" placeholder="请输入车主姓名"/>
      </el-form-item>
      <el-form-item label="状态">
        <el-select-v2
          v-model="data.cardStatus"
          placeholder="请选择"
          :options="options"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="hint">
      <div class="left">
        <el-button type="primary" @click="addMonthCart">添加月卡</el-button>
        <el-button type="primary" @click="batchDel">批量删除</el-button>
      </div>
      <div class="right">
        <el-alert :title="`本园区共计 ${share.spaceNumber} 个车位，月卡用户 ${share.cardCount} 人，车位占有率 ${share.proportion}`" :closable="false" type="info" show-icon />
      </div>
    </div>

    <el-table @select="hSelect" :data="monthCardData" style="width: 100%">
    <el-table-column type="selection" width="55" />
    <el-table-column type="index" label="序号" width="70" />
    <el-table-column prop="personName" label="车主名称" width="116" />
    <el-table-column prop="phoneNumber" label="联系方式"  width="160"/>
    <el-table-column prop="carNumber" label="车牌号码" width="136" />
    <el-table-column prop="carBrand" label="车辆品牌" width="116" />
    <el-table-column prop="totalEffectiveDate" label="剩余有效天数" width="161" />
    <el-table-column prop="cardStatus" label="状态" width="100" >
      <template #default="{row}">
        <span>{{ status[row.cardStatus].name }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" >
      <template #default="{row}">
        <el-button link type="primary" @click="renew(row.id)">续费</el-button>
        <el-button link type="primary" @click="view(row.id)">查看</el-button>
        <el-button link type="primary" @click="edit(row.id)">编辑</el-button>
        <el-button link type="primary" @click="del(row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      v-model:current-page="data.page"
      v-model:page-size="data.pageSize"
      :page-sizes="[5, 10, 20, 30]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<style scoped>
.monthCart{
  background-color: #fff;
  padding: 20px;
  height: 100%;
}
.form{
  border-bottom: 1px solid #EFEFEF;
  margin-bottom: 20px;
}
.el-alert{
  background-color: #E6F7FF;
}
.hint{
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
</style>
